<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XHR</title>
</head>

<body>
  <div>XHRdddd</div>
  <script type="module">
    function ajax(url, method = 'GET', data, onSuccess, onFailed) {
      const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttpRequest')
      xhr.open('GET', url, true)
      xhr.send()
      // xhr.withCredentials = true
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status <= 400) {
            console.log(xhr.response)
            onSuccess && onSuccess(xhr.responseText)
          } else {
            onFailed && onFailed()
          }
        }
      }
    }
    ajax('./data.json', null, null, e => console.log(e))
    fetch('./data.json')
      .then(res=>res.json())
      .then(res=>{
        console.log('fetch res== ', res)
      })
  </script>
</body>

</html>